<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Website Title -->
<title>Login</title>

<!-- Meta data for SEO -->
<meta name="description" content="">
<meta name="keywords" content="">


<link href="<?php echo base_url();?>css/style_login.css" rel="stylesheet" type="text/css" media="all">
<link href="<?php echo base_url();?>css/jqx.base.css" rel="stylesheet" type="text/css" media="all">
<link href="<?php echo base_url();?>css/jqx.fresh.css" rel="stylesheet" type="text/css" media="all">

<script type="text/javascript" src="<?php echo base_url();?>js/jqwidgets/gettheme.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jqwidgets/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jqwidgets/jquery.global.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jqwidgets/jqxvalidator.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jqwidgets/jqxbuttons.js"></script>

<script type="text/javascript">
	$(document).ready(function () {
		/* DECLARATION VARIABLE */
		/* General Variable */
		var theme = 'fresh';

		/* Area and Field Variable */
		var login_content = $("#login_content");
		var login_expander = $("#login_expander");
		var login_form = $("#login_form");
		var login_user = $("#login_user");
		var login_password = $("#login_password");
		var login_login_button = $("#login_login_button");
		var login_cancel_button = $("#login_cancel_button");
		/* END DECLARATION VARIABEL */

		/* SET TYPE AND THEME */
		$('.field_input').addClass('jqx-input');
		$('.field_input').addClass('jqx-rc-all');
		login_expander.jqxExpander({
			width: '925px', theme: theme, showArrow:false, toggleMode: 'none'
		});
		login_login_button.jqxButton({ theme : theme, width : 80, height : 25 });
		login_cancel_button.jqxButton({ theme : theme, width : 80, height : 25 });

		/* END SET TYPE AND THEME */

		/* SET FORM VALIDATOR */
		login_form.jqxValidator({
			theme : theme,
			rules : [
				{ input: '#login_user', message: 'Field Harus Diisi!', action: 'keyup', rule: 'required' },
				{ input: '#login_password', message: 'Field Harus Diisi!', action: 'keyup', rule: 'required' }
				]
		});
		/* END SET FORM VALIDATOR */

		/* ALERT WINDOW */
		var login_alertWindow = $("#login_alertWindow");
		var login_headerAlertWindow = $("#login_headerAlertWindow");
		var login_contentAlertWindow = $("#login_contentAlertWindow");
		var login_btnokAlertWindow = $("#login_btnokAlertWindow");

		login_btnokAlertWindow.jqxButton({ theme : theme });
		login_alertWindow.jqxWindow({ width: 320, height: 110, resizable: false, theme: theme, isModal: true, autoOpen: false, okButton: login_btnokAlertWindow, modalOpacity: 0.4 });

		function login_createAlertWindow(header,msg){
			login_headerAlertWindow.html(header);
			login_contentAlertWindow.html(msg);
			login_alertWindow.jqxWindow('show');
		}

		login_btnokAlertWindow.click(function(){
			login_headerAlertWindow.empty();
			login_contentAlertWindow.empty();
			login_alertWindow.jqxWindow('hide');
		});
		/* END ALERT WINDOW */

		/* DECLARATION FUNCTION */
		function reset_form(){
			login_user.val('');
			login_password.val('');
			login_form.jqxValidator('hide');
		}
		
		function loginVerification(){
			var user = '';
			var password = '';

			user = login_user.val();
			password = login_password.val();
			if(login_form.jqxValidator('validate')){
				$.ajax({
					type : 'POST',
					url : '<?php echo base_url(); ?>admin/user_login',
					data : {
						user : user,
						password : password
					},success : function(msg){
						if(msg == 1){
							var redirect = '<?php echo base_url(); ?>c_berita';
							window.location = redirect;
						}else{
							login_createAlertWindow('Login Failure','Login gagal, harap periksa kembali username dan password anda');
							reset_form();
						}
					}
				});
			}
		}
		
		login_password.on('keypress', function(e){
			if(e.keyCode == 13){
				loginVerification();
			}
		})

		login_login_button.click(function(){
			loginVerification();
		});

		login_cancel_button.click(function(){
			reset_form();
		});
		/* END DECLARATION FUNCTION */

	});
</script>

<body>
<div id="header">
<div id="adlogo">
<a href="<?php echo base_url() ?>"><img src="<?php echo base_url() ?>images/logo.gif" alt="logo" class="logo" /></a>
</div>
</div>
<div id="content">
<div id="login_content">
    <div style="width:500px; margin: 0px auto 10px 30px;" >

	<div id="login_expander" style="position: fixed">

		<div style="overflow:hidden;width: 390px;">Login Form</div>
		<div style="overflow:hidden;width: 400px;">
			<form id="login_form">
				<table align="center">
					<tr>
					<td colspan=2>&nbsp;</td>
					</tr>
					<tr>
						<td>Username </td>
						<td><input type="text" id="login_user" class="field_input" style="width:250px; height : 22px;"></td>
					</tr>
					<tr>
						<td>Password </td>
						<td><input type="password" id="login_password" class="field_input" style="width:250px; height : 22px;"></td>
					</tr>
					<tr>
						<td colspan="2">&nbsp; </td>
					</tr>
					<tr>
						<td colspan="2" align="center"><input type="button" id="login_login_button" value="Login"> &nbsp; <input type="button" id="login_cancel_button" value="Batal"></td>
					</tr>
					<tr>
						<td colspan="2">&nbsp; </td>
					</tr>
				</table>
			</form>
		</div>
	</div>

	<div id="login_alertWindow">
		<div id="login_headerAlertWindow"></div>
		<div>
			<div id="login_contentAlertWindow"></div>
			<div style="float: right; margin-top: 15px;">
				<input type="button" id="login_btnokAlertWindow" value="OK" style="margin-right: 10px" />
			</div>
		</div>
	</div>
    </div>
</div>
</div>
</body>
</html>
